<template>
  <div>
    <header>
      <!-- 状态栏 -->
      <!-- <div class="header_top"></div> -->
      <!-- 返回与搜索 -->

      <div :class="{ header_foot: true, box: nxt >= 140 }">
        <div class="header_ft">
          <img
            v-show="nxt >= 140"
            @click="$router.push('/')"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psd6kfidpmeim4s5z6hawkernctxvhejvbae7e7710-e2f4-4fc5-b344-84ed147ea16e"
            alt=""
          />
          <img
            v-show="nxt < 140"
            @click="$router.push('/')"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps3fhjrxtayl84w3e4d9mbrrjicljoqztue3444aaf3-413a-474b-bc19-f8159fc73f76"
            alt=""
          />
          <span v-show="nxt >= 140">话题</span>
          <img
            v-show="nxt >= 140"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4mxcbv57kar5aczhtt4sgohbhez6akh11adc042-50e4-4f93-b004-0dc663cf7d0e"
            alt=""
          />
          <img
            v-show="nxt < 140"
            @click="$router.push('/')"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/pszih6wi422hjbrptqsgrrccxpj7yl6vffoce67454b-350e-49d2-954b-544df51b0734"
            alt=""
          />
        </div>
      </div>

      <div class="header_body">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps9yecq6pl7t813txjbpugn6kxs6hrkegkd9bcb41f7-17e0-4608-8f18-678ce588df72"
          alt=""
        />
      </div>
    </header>
    <!-- 版心 -->
    <div class="main">
      <div class="content">
        <div class="con">
          <div class="con_img">
            <img
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psupxdwi7ltpcd26m84dpcxq1prvdzhg5prfeda8614-a420-4fc2-9be7-8f85baf40fd5"
              alt=""
            />
          </div>
          <div class="con_text">
            <p class="text1">史上最全10个堵门游戏清单</p>
            <!-- <span>附加道具推荐</span> -->
            <p class="text2">附加道具推荐</p>
          </div>
        </div>

        <div class="con">
          <div class="con_img">
            <img
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psbgn32taevz79txgp858pgfmvx1t4bd1h0627bc06-3106-409e-9ac7-b31fff703fb3"
              alt=""
            />
          </div>
          <div class="con_text">
            <p class="text1">
              <span>婚庆现场</span> |
              <span>全友参与</span>
            </p>
            <!-- <span>附加道具推荐</span> -->
            <p class="text2">附加道具推荐</p>
          </div>
        </div>

        <div class="con">
          <div class="con_img">
            <img
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps8isiajqrgr7ufk0xj26j7jjj648eknkb3f5ab381-062c-40e9-9c43-c34ee13f1f35"
              alt=""
            />
          </div>
          <div class="con_text">
            <p class="text1">
              <span>敬酒祝语</span> |
              <span>亲友祝词</span>
            </p>
            <!-- <span>附加道具推荐</span> -->
            <p class="text2">祝福语大全</p>
          </div>
        </div>

        <button class="shop" @click="onClick_2">更多话题</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nxt: "",
    };
  },
  methods: {
    onClick_2() {
      alert(2);
    },
    brr() {
      window.addEventListener("scroll", () => {
        let scrollTop =
          document.body.scrollTop || document.documentElement.scrollTop;
        this.nxt = scrollTop;
        // console.log(this.nxt);
      });
    },
  },
  created() {
    this.brr();
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-size: 13.33333vw;
}

header {
  width: 100%;
  overflow: hidden;
}

.header_top {
  position: fixed;
  top: 0;
  width: 80%;
  height: 0.25rem;
  /* background-color: pink; */
  margin: 0.34rem 0 0 0.68rem;
}

.header_foot {
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.46rem;
  padding-bottom: 0.3rem;
  /* height: 0.4rem; */
  line-height: 0.4rem;
  z-index: 5;
  display: flex;
  align-items: flex-end;
}
.box {
  background-color: #e4e4e4;
}
.header_ft {
  width: 92%;
  height: 0.4rem;
  line-height: 0.4rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.header_ft span {
  font-size: 0.37rem;
}

.header_body {
  width: 100%;
  height: 4.56rem;
}

.header_body img {
  width: 100%;
  height: 4.56rem;
}

.main {
  width: 100%;
  background-color: #e4e4e4;
}

.content {
  width: 92%;
  height: 14.48rem;
  margin: 0 auto;
  background-color: #e4e4e4;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
}

.con {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.4rem;
}

.con_img {
  width: 100%;
  height: 2.65rem;
}

.con img {
  /* width: 100%; */
  width: 6.9rem;
  height: 2.65rem;
}

.con_text {
  width: 100%;
  /* width: 3.2rem; */
  height: 0.8rem;
  /* border: 1px solid black; */
  background-color: #eeeeee;
  border-radius: 0.8rem;
}

.con_text .text1 {
  /* width: 3.2rem; */
  height: 0.4rem;
  color: rgb(79, 79, 79);
  font-size: 0.28rem;
  text-align: center;
  white-space: nowrap;
  /* line-height: 0.28rem; */
}

.con_text .text2 {
  /* width: 1.36rem; */
  height: 0.4rem;
  color: rgb(153, 153, 153);
  font-size: 0.24rem;
  text-align: center;
  white-space: nowrap;
  /* line-height: 0.24rem; */
  /* margin: 0.11rem 0 0 0.91rem; */
}

.shop {
  border: none;
  outline: none;
  height: 0.48rem;

  width: 2.02rem;
  margin: 0.12rem 0 0 2.4rem;
  color: rgba(248, 248, 248, 1);
  background-color: rgba(216, 65, 65, 1);
  border-radius: 20px;
  font-size: 0.24rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.24rem;
  /* margin-top: 0.01rem; */
}
</style>
